<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="ISUX">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" type="text/css" href="../frozen/css/frozen.css">
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <title>火堆</title>
    <link rel="stylesheet" type="text/css" href="../css/project_closing.css">
</head>

<body>
 <g:if test="${!(projectClosing?.id)||projectClosing?.verified=='refuse'}">
    <footer class="ui-footer ui-footer-stable ui-border-t">
        <div class="ui-footer-btns">
            <button type="button"   class="btn-submit-all btn-footer btn-red"  onclick="submitAll();">提交审核</button>
        </div>
    </footer>
    </g:if>

    <section class="ui-container">
        <g:form id="projectClosingForm" url="[resource:projectClosingInstance, action:'savProjectCloseing']" method="post" >
         <input type="hidden" name="projectid" value="${project.id}">
         <g:if test="${projectClosing?.id}">
         <input type="hidden" name="id" value="${projectClosing?.id}">
         </g:if>
            <div class="u-module ">
                <div class="ui-form form-common2 ui-border-tb">
                    <div class="ui-form-item ">
                        <label for="#">项目名称</label>
                        <p class="txt" style="width:auto;">${project.name}</p>
                    </div>
                     <div class="ui-form-item ui-border-tb">
                        <label for="#">筹款目标</label>
                        <p class="txt" style="width:auto;"><em><g:formatNumber number="${project.amount}" format="0.00"/></em> 元</p>
                    </div>
                    <div class="ui-form-item ">
                        <label for="#">筹款总额</label>
                        <p class="txt" style="width:auto;"><em><g:formatNumber number="${project.realAmount}" format="0.00"/></em> 元</p>
                    </div>
                    <div class="ui-form-item ui-border-tb">
                        <label for="#">接收总额</label>
                        <p class="txt" style="width:auto;"><em><g:formatNumber number="${payment/100}" format="0.00"/></em> 元</p>
                    </div>
                </div>
            </div>
            <div class="u-module-title" style="font-size: 12px;line-height: 16px;color: #a89e99;"> 若筹款总额超过筹款目标，超额的善款会进入“火堆爱心池”，用于支持其他公益项目。</div>
            <div class="u-module-title">善款使用</div>
            <div class="u-module">
                <div class="ui-form form-common2">
                    <div class="ui-form-item ui-border-tb">
                        <label for="#">实际花费</label>
                        <g:if test="${projectClosing?.realSpend}">
                        <input type="number" placeholder="请输入项目实际花费金额" name="realSpend" id="realSpend" value="${projectClosing?.realSpend}"  onblur="checkFloatNum(this, 0.0);">
                        </g:if>
                        <g:else>
                        <input type="number" placeholder="请输入项目实际花费金额" name="realSpend" id="realSpend"  onblur="checkFloatNum(this, 0.0);">
                        </g:else>
                        
                        <div class="form-unit">元</div>
                    </div>
                    <div class="ui-form-item ui-border-b">
                        <label for="#">发票总额</label>
                         <g:if test="${projectClosing?.tltalInvoice}">
                        <input type="number" placeholder="请输入提供的发票总额" name="tltalInvoice" id="tltalInvoice" value="${projectClosing?.tltalInvoice}"onblur="checkFloatNum(this, 0.0);">
                        </g:if>
                        <g:else>
                        <input type="number" placeholder="请输入提供的发票总额" name="tltalInvoice" id="tltalInvoice"  onblur="checkFloatNum(this, 0.0);">
                        </g:else>
                        
                        <div class="form-unit">元</div>
                    </div>
                    <div class="ui-form-item ui-form-item-textarea">
                        <label for="#">善款明细</label>
                        <textarea class="count-num" id="fundraisingDetail" placeholder="更具反馈票简述善款使用明细，包括购买了那几种物资，如何安排发放等，以及尾款或剩余款项的处理。" data-length="500" name="fundraisingDetail" >${projectClosing?.fundraisingDetail}</textarea>
                        <g:if test="${projectClosing?.fundraisingDetail}">
                        <div class="form-unit count">${500-projectClosing?.fundraisingDetail.length()}</div>
                        </g:if><g:else>
                         <div class="form-unit count">500</div>
                        </g:else>
                    </div>
                   <g:if test="${ projectClosing?.invoiceImgs!=null}">
                    <div class="form-imgs form-imgs1" data-index="${projectClosing?.invoiceImgs?.size()+1}" data-max-length="4">
                    </g:if>
                    <g:else>
                    <div class="form-imgs form-imgs1" data-index="${1}" data-max-length="4">
                    </g:else>
                    
                     <g:each in="${projectClosing?.invoiceImgs}" var="pic" status="i">
                     <div class="img-box"  style="background-image:url(/scfire/project/imgRead?img=${pic})">
                            <b class="close"><img src="../images/icon-fork-white.png" alt=""></b>
                            <input type="file" id="img1-${i+1}" name="img1-${i+1}">
                            <input type="hidden" name="invoiceImgs" value="${pic}">
                        </div>
                     </g:each>
                     <g:if test="${ projectClosing?.invoiceImgs}">
                     <g:if test="${ projectClosing.invoiceImgs.size()<4}">
                     <div class="img-box">
                            <b class="close"><img src="../images/icon-fork-white.png" alt=""></b>
                            <input type="file" id="img1-${projectClosing?.invoiceImgs.size()+1}" name="img1-${projectClosing?.invoiceImgs.size()+1}">
                            <input type="hidden" >
                        </div>
                     </g:if>
                     <g:else>
                     <div class="img-box" style="display:none">
                            <b class="close"><img src="../images/icon-fork-white.png" alt=""></b>
                            <input type="file" id="img1-${projectClosing?.invoiceImgs.size()+1}" name="img1-${projectClosing?.invoiceImgs.size()+1}">
                            <input type="hidden" >
                        </div>
                     
                     </g:else>
                     </g:if>
                     <g:else>
                     <div class="img-box">
                            <b class="close"><img src="../images/icon-fork-white.png" alt=""></b>
                            <input type="file" id="img1-1" name="img1-1">
                            <input type="hidden" >
                        </div>
                     
                     </g:else>
                        
                    </div>
                    <div class="form-imgs-hint ui-border-b">
                        上传发票照片（1-4张）
                    </div>
                </div>
            </div>
            <div class="u-module-title">项目执行</div>
            <div class="u-module">
                <div class="ui-form form-common2">
                    <div class="ui-form-item ui-border-tb">
                        <label for="#">受益人群</label>
                        <input class="count-num" id="profitPeople" type="text" placeholder="例如：江西遂川希望小学" data-length="30" name="profitPeople" value="${projectClosing?.profitPeople }">
                        <g:if test="${projectClosing?.profitPeople}">
                        <div class="form-unit count">${30-projectClosing?.profitPeople.length()}</div>
                        </g:if><g:else>
                         <div class="form-unit count">30</div>
                        </g:else>
                    </div>
                    <div class="ui-form-item ui-border-b">
                        <label for="#">受益人数</label>
                        <g:if test="${projectClosing?.profitNum}">
                                <input type="number" id="profitNum" placeholder="请输入项目受益人数" name="profitNum" value="${projectClosing?.profitNum }" onblur="checkInputNum(1, 99999, this);">
                        </g:if>
                        <g:else>
                                <input type="number" id="profitNum" placeholder="请输入项目受益人数" name="profitNum" value="" onblur="checkInputNum(1, 99999, this);">  
                        </g:else>
                        <div class="form-unit">人</div>
                    </div>
                    <div class="ui-form-item ui-form-item-textarea">
                        <label for="#">结项概述</label>
                        <textarea class="count-num" id="summary" placeholder="简述筹款及执行过程中的关键结点、遇到的困难、最终的结果和目前受助人/事的现状，项目执行成功后的感谢反馈与互动。" data-length="500" name="summary">${projectClosing?.summary }</textarea>
                         <g:if test="${projectClosing?.summary}">
                        <div class="form-unit count">${500-projectClosing?.summary.length()}</div>
                        </g:if><g:else>
                         <div class="form-unit count">500</div>
                        </g:else>
                    </div>
 					<g:if test="${ projectClosing?.invoiceImgs!=null}">
                    <div class="form-imgs form-imgs2" data-index="${ projectClosing.summaryImgs.size()+1}" data-max-length="8">
                    </g:if>
                    <g:else>
                     <div class="form-imgs form-imgs2" data-index="1" data-max-length="8">
                    </g:else>
                   
                     <g:each in="${projectClosing?.summaryImgs}" var="pic" status="i">
                     <div class="img-box"  style="background-image:url(/scfire/project/imgRead?img=${pic})">
                            <b class="close"><img src="../images/icon-fork-white.png" alt=""></b>
                            <input type="file" id="img2-${i+1}" name="img2-${i+1}">
                            <input type="hidden" name="summaryImgs" value="${pic}">
                        </div>
                     </g:each>
                     
                     <g:if test="${ projectClosing?.summaryImgs}">
                     <g:if test="${ projectClosing.summaryImgs.size()<8}">
                     <div class="img-box">
                            <b class="close"><img src="../images/icon-fork-white.png" alt=""></b>
                            <input type="file" id="img2-${projectClosing?.summaryImgs.size()+1}" name="img2-${projectClosing?.summaryImgs.size()+1}">
                            <input type="hidden"  >
                        </div>
                     </g:if>
                     <g:else>
                       <div class="img-box" style="display:none">
                            <b class="close"><img src="../images/icon-fork-white.png" alt=""></b>
                            <input type="file" id="img2-${projectClosing?.summaryImgs.size()+1}" name="img2-${projectClosing?.summaryImgs.size()+1}">
                            <input type="hidden" >
                        </div>
                     
                     </g:else>
                     </g:if>
                     <g:else>
                      <div class="img-box">
                            <b class="close"><img src="../images/icon-fork-white.png" /></b>
                            <input type="file" id="img2-1" name="img2-1">
                            <input type="hidden" >
                        </div>                    
                     </g:else>
                    </div>
                    <div class="form-imgs-hint ui-border-b">
                        上传项目成果展示图片（4-8张）
                    </div>
                </div>
            </div>
        </g:form>
    </section>
<script type="text/javascript"
		src="${resource(dir: 'js', file: 'jquery-1.10.2.js')}"></script>
	<script type="text/javascript"
		src="${resource(dir: 'js', file: 'ajaxfileupload.js')}"></script>
    <script src="../frozen/lib/zeptojs/zepto.min.js"></script>
    <script src="../frozen/js/frozen.js"></script>
    <script>
    function submitAll(){  
        if($("#realSpend").val()==""){
            alert("请输入实际花费！")
            return ;
            }
        if($("#tltalInvoice").val()==""){
            alert("请输入发票总额！")
            return ;
            }
        if($("#fundraisingDetail").val()==""){
            alert("请输入善款明细！")
            return ;
            }
        if($("#fundraisingDetail").val().length>500){
            alert("善款明细简短点吧！")
            return ;
            }
        if($("#profitPeople").val()==""){
            alert("请输入收益人群！")
            return ;
            }
        if($("#profitNum").val()==""){
            alert("请输入受益人数！")
            return ;
            }
             if($("#profitNum").val().length>30){
            alert("受益人数字数太长！")
            return ;
            }
        if($("#summary").val()==""){
            alert("请输入结项概述！")
            return ;
            }
        if($("#summary").val().length>500){
            alert("结项概述再简短点吧！")
            return ;
            }
        var max1 = parseInt($('.form-imgs1').attr('data-index'));
        if(max1==1){ 
            alert("至少上传一张发票照片！")
            return ;
            }
        var max2 = parseInt($('.form-imgs2').attr('data-index'));
        if(max2<5){ 
            alert("至少上传4张成果展示图片！")
            return ;
            }
        $("#projectClosingForm").submit();
        
    }
    
    function checkFloatNum(element, init){
    	var num = element.value 
    	if(!(/^(\d|([1-9]\d+))(\.\d{1,2})?$/.test(num))){
    		alert("输入正确的金额，最多允许两位小数！");
            element.value = init;
    	}
    }
    function checkInputNum(least, most, element){
    	var num = element.value 
    	
    	
        if(!(/^(\d|([1-9]\d+))?$/.test(num))){
            //alert("输入的数字有误！");
            element.value = least;
        }
        else if(num < least){
        	element.value = least;
        }
        else if(num > most){
        	element.value = most;
        }
    }
    
        (function() {
            $('.new-list-cover .new-list .top .btn-close').click(function() {
                $('.new-list-cover').removeClass('show');
            });

            // 绑定对应元素的字数校验事件
            var bind_name = 'input';
            if (navigator.userAgent.indexOf("MSIE") != -1) {
                bind_name = 'propertychange';
            }
            $('.count-num').bind(bind_name, function() {
                checkWords(this, $(this).attr('data-length'));
            })
            $('.count-num').blur(function() {
                if ($(this).val().length > $(this).attr('data-length')) {
                    //$(this).val($(this).val().substr(0, $(this).attr('data-length')));
                }
            });
         
             
            
            
			 
			    
			    

            $('.form-imgs').on('click', '.img-box .close', function() {
                var imgs = $(this).parents('.form-imgs');
                var max = parseInt(imgs.attr('data-max-length'));

                $(this).parents('.img-box').remove();

                if (imgs.find('.img-box').length <= max) {
                    imgs.find('.img-box:last-child').show();
                }
            })
            $('.form-imgs1').on('change', '.img-box:last-child input[type=file]', function() {
                // 前台本地测试代码模拟返回操作，后台删除
                				posterStates = true;
								var obj = $(this);
								var file = obj.attr('id');
								
								console.log("request:" + file);
								$.ajaxFileUpload({
											url : '/scfire/project/imgSaveMb',
											secureuri : false,
											dataType : 'text',
											fileElementId : file,//file标签的id 
											success : function(data, status) {
												if (data == 'large') {
													showWarn('图片过大');
													return;
												}
												if (data == 'format') {
													showWarn('图片格式不对');
													return;
												}
												//把图片替换  
												if (data == 'fail') {
													showWarn('上传失败');
												} else {
													//图片预览
													var imageurl = "/scfire/project/imgRead?img="+ data;
													addPhotoPreview($('.form-imgs1'), imageurl,data);
												}
											},
											error : function(data, status, e) {
											},
										});
                //addPhotoPreview($(this).parents('.form-imgs'), 'file:///D:/git/crowdfundingmoney/crowdfundingmoney/web-app/images_mobile/demo/demo-jieshao-2.jpg');
            })
            $('.form-imgs2').on('change', '.img-box:last-child input[type=file]', function() {
                // 前台本地测试代码模拟返回操作，后台删除
                				posterStates = true;
								var obj = $(this);
								var file = obj.attr('id');
								
								console.log("request:" + file);
								$.ajaxFileUpload({
											url : '/scfire/project/imgSaveMb',
											secureuri : false,
											dataType : 'text',
											fileElementId : file,//file标签的id 
											success : function(data, status) {
												if (data == 'large') {
													showWarn('图片过大');
													return;
												}
												if (data == 'format') {
													showWarn('图片格式不对');
													return;
												}
												//把图片替换  
												if (data == 'fail') {
													showWarn('上传失败');
												} else {
													//图片预览
													var imageurl = "/scfire/project/imgRead?img="+ data;
													addPhotoPreview($('.form-imgs2'), imageurl,data);
												}
											},
											error : function(data, status, e) {
											},
										});
                //addPhotoPreview($(this).parents('.form-imgs'), 'file:///D:/git/crowdfundingmoney/crowdfundingmoney/web-app/images_mobile/demo/demo-jieshao-2.jpg');
            })
        })();

        function addPhotoPreview(imgs, url,img) {
        	
            var max = parseInt(imgs.attr('data-max-length'));
            if (max < imgs.find('.img-box').length) {
                // imgs.find('.img-box').eq(max - 1).css('background-image', 'url(' + url + ')').find('input[type=hidden]').val(url);
            } else {
                imgs.find('.img-box:last-child').css('background-image', 'url(' + url + ')').find('input[type=hidden]').val(img);
                if(max==4){
               		 imgs.find('.img-box:last-child').find('input[type=hidden]').attr("name","invoiceImgs");
                }else{
                	 imgs.find('.img-box:last-child').find('input[type=hidden]').attr("name","summaryImgs");
                }
                
                var index = parseInt(imgs.attr('data-index'));
                index++;
                if(max==4){
                    var html = '<div class="img-box"><b class="close"><img src="../images/icon-fork-white.png" alt=""></b><input type="file" id="img1-' + (index) + '"'+ 'name="img1-' + (index) +'"><input type="hidden" ></div>';       
                }else{
                    var html = '<div class="img-box"><b class="close"><img src="../images/icon-fork-white.png" alt=""></b><input type="file" id="img2-' + (index) + '"'+ 'name="img2-' + (index) +'"><input type="hidden" ></div>';       

                }
                imgs.attr('data-index', index).append(html);

                if (max < imgs.find('.img-box').length) {
                    imgs.find('.img-box:last-child').hide();
                }
            }
        }
        
        function checkWords(obj, n) {
            n = parseInt(n);
            var c = 0;
            if ($(obj).val().length > n) {
                c =  n - $(obj).val().length;
                $(obj).siblings('.count').css("color","red");
            } else {
                c = n - $(obj).val().length;
                $(obj).siblings('.count').css("color","#988e89");
            }
             $(obj).siblings('.count').text(c);
          }

        function calFormNum(obj, add) {
            if (typeof add == 'undefined') {
                add = true;
            }
            correctInputNum(obj);
            var c = parseInt($(obj).val());
            c += (add ? 1 : -1);
            if (c < 1) {
                c = 1;
            } else if (c > 99) {
                c = 99;
            }
            $(obj).val(c);
        }

        function correctInputNum(obj) {
            var v = correctNum($(obj).val());
            if (v == '') {
                $(obj).val('1');
            } else {
                $(obj).val(v);
            }
        }

        function correctNum(num) {
            return (num + '').replace(/\D/g, '');
        }
    </script>
</body>
</html>
